<template>
  <div id="app">
    <div class="content">
      <div class="shop-info">
        <h2>店铺信息</h2>
        <p>
          店铺名：<span>{{ shopInfo.shopName }}</span>
        </p>
        <p>
          店铺地址：<span>{{ shopInfo.shopAddress }}</span>
        </p>
        <p>
          经营类目：<span>{{ shopInfo.shopCategory }}</span>
        </p>
        <p>
          店铺介绍：<span>{{ shopInfo.shopDescrible }}</span>
        </p>
        <p>
          营业时间：<span
            >{{ shopInfo.shopStart }} ~ {{ shopInfo.shopEnd }}</span
          >
        </p>
        <p>
          店铺当前状态：<span>{{
            shopInfo.shopStatus === 0
              ? "打烊"
              : shopInfo.shopStatus === 1
              ? "营业中"
              : "休息中"
          }}</span>
        </p>
        <div class="status">
          <span>切换营业状态：</span>
          <el-select v-model="selectedStatus" placeholder="请选择状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button type="primary" @click="updateStatus">确定 </el-button>
        </div>
      </div>
      <div class="shop-image">
        <img :src="shopInfo.shopAvatar" alt="店铺图片" />
      </div>
      <div class="shop-management">
        <h3>商家店铺管理操作</h3>
        <button @click="editAvatarBox">更换店铺头像</button>
        <button @click="editInfo">修改店铺信息</button>
        <button @click="openChangePassword">修改密码</button>
        <button @click="moreActions">更多操作</button>
      </div>
    </div>

    <!-- 修改头像弹窗 -->
    <el-dialog :visible.sync="avatarDialogVisible" title="修改店铺头像">
      <el-upload
        action="#"
        list-type="picture-card"
        :limit="1"
        :auto-upload="false"
        :file-list="avatarFileList"
        :on-change="handleAvatarChange"
        :on-remove="handleAvatarRemove"
        :on-preview="handlePictureCardPreview"
      >
        <i v-show="avatarFileList.length === 0">上传头像</i>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="avatarDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAvatar">提交</el-button>
      </div>
    </el-dialog>

    <!-- 修改店铺信息弹窗 -->
    <el-dialog :visible.sync="editInfoDialogVisible" title="修改店铺信息">
      <el-form :model="editInfoForm" label-width="110px">
        <el-form-item label="店铺名称">
          <el-input
            v-model="editInfoForm.shopName"
            placeholder="请输入店铺名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input
            v-model="editInfoForm.shopAddress"
            placeholder="请输入店铺地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="经营类目">
          <el-input
            v-model="editInfoForm.shopCategory"
            placeholder="请输入经营类目"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺介绍">
          <el-input
            type="textarea"
            v-model="editInfoForm.shopDescrible"
            placeholder="请输入店铺介绍"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始营业时间" required>
          <el-time-picker
            v-model="editInfoForm.shopStart"
            placeholder="选择开始营业时间"
            format="HH:mm"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束营业时间" required>
          <el-time-picker
            v-model="editInfoForm.shopEnd"
            placeholder="选择结束营业时间"
            format="HH:mm"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editInfoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditInfo">提交</el-button>
      </div>
    </el-dialog>

    <!-- 修改商家密码弹窗 -->
    <el-dialog :visible.sync="changePasswordDialogVisible" title="修改密码">
      <el-form
        :model="changePasswordForm"
        :rules="changePasswordRules"
        ref="changePasswordForm"
        label-width="100px"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            type="password"
            v-model="changePasswordForm.oldPassword"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="changePasswordForm.newPassword"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="changePasswordForm.confirmPassword"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitChangePassword">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getShopInfo,
  updateShopStatus,
  updateShopInfo,
  updateShopAvatar,
} from "@/api/shop/shopInfo";
import { updatePassword } from "@/api/business/businessInfo";

export default {
  data() {
    return {
      //businessId: 1,

      //店铺的信息
      shopInfo: {
        id: null,
        shopName: null,
        shopAddress: null,
        shopCategory: null,
        shopDescrible: null,
        shopStart: null,
        shopEnd: null,
        shopStatus: null,
        shopAvatar: null, // 替换为实际图片URL
      },
      statusOptions: [
        { value: 0, label: "打烊" },
        { value: 1, label: "营业中" },
        { value: 2, label: "休息中" },
      ],
      selectedStatus: null, // 用于绑定下拉框的选中值
      avatarDialogVisible: false, // 修改头像弹窗的显示状态
      avatarFileList: [], // 用于存储上传的头像文件

      editInfoDialogVisible: false, // 修改用户信息弹窗的显示状态

      //店铺要进行修改的参数
      editInfoForm: {
        //id: null,
        shopName: null,
        shopAddress: null,
        shopCategory: null,
        shopDescrible: null,
        shopStart: null,
        shopEnd: null,
      },

      changePasswordDialogVisible: false, // 修改密码弹窗的显示状态

      //修改密码的参数
      changePasswordForm: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null,
      },
      //修改密码的规则
      changePasswordRules: {
        oldPassword: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.changePasswordForm.newPassword) {
                callback(new Error("两次输入的新密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    // 展示商家信息
    showShopInfo() {
      // 获取商家信息后端请求
      getShopInfo(this.getUserId)
        .then((res) => {
          if (res.code === 200) {
            this.shopInfo = res.data;
            this.selectedStatus = this.shopInfo.shopStatus; // 初始化下拉框的选中值
          } else {
            this.$message.error("获取店铺信息失败");
          }
        })
        .catch((err) => {3
          console.log(err);
          this.$message.error("获取店铺信息失败");
        });
    },

    // 修改状态
    updateStatus() {
      if (this.selectedStatus === null) {
        this.$message.warning("请选择一个状态");
        return;
      }
      const statusData = {
        id: this.shopInfo.id,
        updateStatus: this.selectedStatus,
      };
      // 发送修改状态的后端请求
      updateShopStatus(statusData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("店铺状态更新成功");
            this.shopInfo.shopStatus = this.selectedStatus; // 更新店铺状态
          } else {
            this.$message.error("店铺状态更新失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("店铺状态更新失败");
        });
    },

    // 打开修改头像弹窗
    editAvatarBox() {
      this.avatarFileList = []; // 清空文件列表
      this.avatarDialogVisible = true;
    },

    // 头像文件改变时的回调
    handleAvatarChange(file, fileList) {
      this.avatarFileList = fileList; // 更新文件列表
    },

    // 头像文件移除时的回调
    handleAvatarRemove(file, fileList) {
      this.avatarFileList = fileList; // 更新文件列表
    },

    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 提交头像
    submitAvatar() {
      if (this.avatarFileList.length === 0) {
        this.$message.warning("请先上传头像");
        return;
      }
      const formData = new FormData();
      formData.append("id", this.getUserId);
      formData.append("shopAvatar", this.avatarFileList[0].raw);
      // 修改头像的后端请求
      updateShopAvatar(formData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("头像修改成功");
            this.shopInfo.shopAvatar = URL.createObjectURL(
              this.avatarFileList[0].raw
            ); // 更新头像显示
            this.avatarDialogVisible = false; // 关闭弹窗
          } else {
            this.$message.error("头像修改失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("头像修改失败");
        });
    },

    // 打开修改用户信息弹窗
    editInfo() {
      this.editInfoForm = { ...this.shopInfo }; // 将当前店铺信息复制到表单中
      this.editInfoDialogVisible = true;
    },

    // 提交修改用户信息
    submitEditInfo() {
      const editInfoData = {
        id: this.shopInfo.id,
        ...this.editInfoForm,
      };
      // 发送修改用户信息的后端请求
      updateShopInfo(editInfoData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("店铺信息修改成功");
            this.shopInfo = { ...this.editInfoForm }; // 更新店铺信息
            this.editInfoDialogVisible = false; // 关闭弹窗
          } else {
            this.$message.error("店铺信息修改失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("店铺信息修改失败");
        });
    },

    // 打开修改密码弹窗
    openChangePassword() {
      (this.changePasswordForm.oldPassword = null),
        (this.changePasswordForm.newPassword = null),
        (this.changePasswordForm.confirmPassword = null),
        (this.changePasswordDialogVisible = true);
    },

    // 提交修改密码
    submitChangePassword() {
      this.$refs.changePasswordForm.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交表单
          this.changePassword();
        } else {
          // 表单验证失败，阻止提交
          this.$message.error("请按照规范填写！");
        }
      });
    },

    // 提交修改密码
    changePassword() {
      const changePasswordData = {
        id: this.getUserId,
        password: this.changePasswordForm.oldPassword,
        newPassword: this.changePasswordForm.newPassword,
      };
      // 发送修改密码的后端请求
      updatePassword(changePasswordData)
        .then((res) => {
          console.log(res);

          if (res.code === 200) {
            this.$message.success("密码修改成功");
            this.changePasswordDialogVisible = false; // 关闭弹窗
          } else {
            this.$message.error(res.msg);
            this.changePasswordDialogVisible = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("密码修改失败");
          this.changePasswordDialogVisible = false;
        });
    },

    moreActions() {
      alert("更多操作功能正在开发");
    },
  },
  computed: {
    getUserId() {
      return this.$store.state.user.userId;
    },
  },
  created() {
    this.showShopInfo();
  },
};
</script>

<style>
/* 全局基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #f8f9fa;
  line-height: 1.6;
  color: #333;
}

/* 头部样式优化 */
.header {
  background: linear-gradient(135deg, #3895e7 0%, #359c6d 100%);
  color: white;
  text-align: center;
  padding: 1.5rem 0;
  box-shadow: 0 2px 8px rgba(66, 185, 131, 0.15);
  margin-bottom: 2rem;
}

.header h1 {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 主内容区域布局 */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .content {
    grid-template-columns: 1fr;
  }
}

/* 信息卡片通用样式 */
.shop-info,
.shop-management {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.shop-info:hover,
.shop-management:hover {
  transform: translateY(-2px);
}

.shop-info h2,
.shop-management h3 {
  color: #2c3e50;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f0f2f5;
}

/* 店铺信息项优化 */
.shop-info p {
  margin-bottom: 0.875rem;
  font-size: 0.9375rem;
  color: #4a5568;
  display: flex;
}

.shop-info span {
  color: #2d3748;
  font-weight: 500;
  margin-left: auto;
  padding-left: 1rem;
  min-width: 120px;
  text-align: right;
}

/* 状态切换区域 */
.status {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #e2e8f0;
}

.status .el-select {
  width: 150px;
  margin-right: 1rem;
}

/* 店铺图片区域 */
.shop-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  border: 1px solid #edf2f7;
}

/* 操作按钮区域 */
.shop-management {
  grid-column: 1 / -1;
  text-align: center;
}

.shop-management button {
  margin: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
  min-width: 120px;
}

.shop-management button:hover {
  background: #409eff;
  box-shadow: 0 2px 8px rgba(66, 185, 131, 0.2);
}

.shop-management button:nth-child(2) {
  background: #409eff;
}

.shop-management button:nth-child(2):hover {
  background: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.shop-management button:nth-child(3) {
  background: #e6a23c;
}

.shop-management button:nth-child(3):hover {
  background: #d48806;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
}

.shop-management button:nth-child(4) {
  background: #f56c6c;
}

.shop-management button:nth-child(4):hover {
  background: #dd6161;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
}

/* 弹窗样式优化 */
.el-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.el-dialog__header {
  padding: 1.25rem 1.5rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.el-dialog__title {
  color: #2d3748;
  font-weight: 600;
  font-size: 1.125rem;
}

.el-dialog__body {
  padding: 1.5rem;
}

/* 表单样式优化 */
.el-form-item {
  margin-bottom: 1.25rem;
}

.el-form-item__label {
  color: #4a5568;
  font-weight: 500;
  font-size: 0.9375rem;
}

.el-input,
.el-textarea,
.el-time-picker {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: border-color 0.2s ease;
}

.el-input:focus,
.el-textarea:focus,
.el-time-picker:focus {
  outline: none;
  border-color: #42b983;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.1);
}

.el-textarea {
  resize: vertical;
  min-height: 80px;
}

/* 弹窗按钮组 */
.el-dialog__footer {
  padding: 1rem 1.5rem;
  text-align: right;
  border-top: 1px solid #e9ecef;
}

.el-button {
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}

.el-button + .el-button {
  margin-left: 1rem;
}

.el-button--primary {
  background: #42b983;
  border-color: #42b983;
}

.el-button--primary:hover {
  background: #359c6d;
  border-color: #359c6d;
  box-shadow: 0 2px 8px rgba(66, 185, 131, 0.2);
}

.el-button--default {
  color: #4a5568;
  border-color: #e2e8f0;
}

.el-button--default:hover {
  color: #42b983;
  border-color: #c6f6d5;
  background: #f0fff4;
}

/* 时间选择器样式 */
.el-time-picker__content {
  border-radius: 8px;
}

/* 图片预览弹窗 */
.el-image-viewer__wrapper {
  border-radius: 8px;
}
</style>